import { Link } from 'react-router-dom'
import clsx from 'clsx'

const evalList = [
  {
    "name": "兴趣测评（Interest）",
    "desc": "清晰了解学生的兴趣倾向和适宜专业，帮助您达到专业和兴趣相互结合。",
    "completed": 30869,
    "time": "15-20min",
    "herf": "/"
  },
  {
    "name": "性格测评（Character）",
    "desc": "全方位解读学生的性格、专业、职业联系，提供个人定位和专业选择的科学依据。",
    "completed": 29696,
    "time": "15-20min",
    "herf": "/"
  },
  {
    "name": "能力测评（Ability）",
    "desc": "重新认识学员的智能分布，尽可能地挖掘您的潜在能力，匹配到更适合您的专业。",
    "completed": 27096,
    "time": "15-20min",
    "herf": "/"
  },
  {
    "name": "价值观测评（Value）",
    "desc": "协助学生进行更理想的职业生涯发展规划，帮助您科学地选择专业。",
    "completed": 22359,
    "time": "15-20min",
    "herf": "/"
  },
  {
    "name": "意向测评（学科倾向）",
    "desc": "自主评价学生的学科优劣情况，帮助您查缺补漏，扬长避短。",
    "completed": 27519,
    "time": "15-20min",
    "herf": "/"
  }
]

const fromColorMap = [
  'from-sky-100',
  'from-emerald-100',
  'from-indigo-100',
  'from-violet-100',
  'from-fuchsia-100',
  // 'from-pink-100',
]
const toColorMap = [
  'to-sky-50',
  'to-emerald-50',
  'to-indigo-50',
  'to-violet-50',
  'to-fuchsia-50',
  // 'to-pink-50',
]
export function EvalNav() {
  return (
    <ul role="list" className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {evalList.map((evalDetail, index) => (
        <Link key={evalDetail.name}>
          <li className={`col-span-1 divide-y divide-gray-200 rounded-lg bg-shadow text-ellipsis bg-gradient-to-l ${fromColorMap[index]} ${toColorMap[index]}`}>
            <div className="flex w-full items-center justify-between space-x-6 p-6">
              <div className="flex-1">
                <h3 className="text-base font-bold text-gray-900">{evalDetail.name}</h3>
                <p className="mt-2 text-sm text-gray-500">{evalDetail.desc}</p>
                <p className="mt-4 text-xs text-gray-400">{evalDetail.completed}人已完成评测 | 预估{evalDetail.time}</p>
              </div>
            </div>
          </li>
        </Link>
      ))
      }
    </ul >
  )
}
